<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Expenses-index</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="format-detection" content="email=no,address=no,telephone=no" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui" />
<script type="text/javascript" src="../js/zepto.min.js"></script>
<script type="text/javascript" src="../js/mediaFize.js"></script>
<script type="text/javascript" src="../js/util.js"></script>
<script type="text/javascript" src="../js/swiper-3.4.0.min.js"></script>
<script type="text/javascript" src="../js/timer.js"></script>
<script type="text/javascript" src="../js/vue.min.js"></script>
<link type="text/css" rel="stylesheet" href="../css/home.css" />
<link type="text/css" rel="stylesheet" href="../css/swiper-3.4.0.min.css" />
<link type="text/css" rel="stylesheet" href="css/index.css" />
<style>
</style>
</head>
<body>
<div id="pageSwaper">
	<div class="homepage_index_bg">
		<div class="animate">
			<div class="baseball">
				<i class="icon1"></i>
				<i class="icon2"></i>
				<span class="credits">当前已用金额<i>3000</i></span>
			</div>
		</div>
		<nav class="nav">
			<div class="header_user swiper-container">
				<ul class="swiper-wrapper">
					<li class="swiper-slide" v-on:click="toFlow($event)">
						<a date-name="xialei">夏磊</a>
					</li>
					<li class="swiper-slide" v-on:click="toFlow($event)">
						<a date-name="caowenjian">操文健</a>
					</li>
					<li class="swiper-slide" v-on:click="toFlow($event)">
						<a date-name="xiongcong">熊聪</a>
					</li>
					<li class="swiper-slide" v-on:click="toFlow($event)">
						<a date-name="pengwen">彭文</a>
					</li>
					<li class="swiper-slide" v-on:click="toFlow($event)">
						<a date-name="panhongfei">潘鸿飞</a>
					</li>
				</ul>
			</div>
		</nav>
		<!--详情-->
		<div class="detail_info">
			<p class="title">消费记录 : </p>
			<table cellpadding="0" cellspacing="0">
			  	<colgroup span="3" style="color:blue"></colgroup>
			  	<tr class="header">
			  		<td>日期</td>
			  		<td>用途</td>
			  		<td>消费人</td>
			  		<td>备注</td>
			  		<td>金额</td>
			  		<td>付款人</td>
			  	</tr>
			  	<div class="list">
				  	<tr v-for="item in logList">
				  		<td>{{item.recordDate | formatTime('YMD')}}</td>
				  		<td>{{item.billType | billType}}</td>
				  		<td>{{divideUser(item.divideUser)}}</td>
				  		<td>{{description(item.description)}}</td>
				  		<td>{{item.totalAmount}}</td>
				  		<td>{{item.payUser | formatName}}</td>
				  	</tr>
			  	</div>
			</table>
		</div>
	</div>
</div>
<script>
//	var name="熊聪";
	var vm = new Vue({
        el: "#pageSwaper",
        data: {
            urls: {
                IterationLogsHandler: "../Handler/IterationLogsHandler.ashx"
            },
            logList: [],
            name:'',
            swiperId:0,
            params:'',
        },
        methods: {
            getLogList: function () {
            	
            	var DataObj={
            		recordName:"熊聪",
            		logList:[
	                	{"billType":"1","recordDate":1505271112000,"payUser":"panhongfei","totalAmount":200.12,"description":"测试","isClean":"1","divideUser":null,"makeTime":1505271153000,"modifyTime":null,"id":5,"operator":"panhongfei"},
	                	{"billType":"1","recordDate":1505271112000,"payUser":"panhongfei","totalAmount":200.0,"description":"测试","isClean":"1","divideUser":null,"makeTime":1505271153000,"modifyTime":null,"id":5,"operator":"panhongfei"},
	                	{"billType":"1","recordDate":1505271112000,"payUser":"panhongfei","totalAmount":200.14,"description":"测试","isClean":"1","divideUser":null,"makeTime":1505271153000,"modifyTime":null,"id":5,"operator":"panhongfei"},
	                	{"billType":"1","recordDate":1505271112000,"payUser":"panhongfei","totalAmount":200.0,"description":"测试","isClean":"1","divideUser":null,"makeTime":1505271153000,"modifyTime":null,"id":5,"operator":"panhongfei"},
	                	{"billType":"1","recordDate":1505271112000,"payUser":"panhongfei","totalAmount":200.15,"description":"测试","isClean":"1","divideUser":null,"makeTime":1505271153000,"modifyTime":null,"id":5,"operator":"panhongfei"}
                	]
            	};
            	vm.logList=DataObj.logList;
            	vm.name=DataObj.recordName;
//              $.getJSON(vm.urls.IterationLogsHandler, { type: params}, function (data) {
//                  if (data.IsSuccess)
//                      vm.logList = data.ResultData.resultList;
//              })
           },
           toFlow: function(event) {  
                // 点击li获取当前li父辈ul的name属性值  
                var flowIndex = $(event.target).attr("date-name");  
                vm.params=flowIndex; 
                console.info(vm.params)
                  
            },  
           swiper:function(value){
           	    var arr=["夏磊","操文健","熊聪","彭文","潘鸿飞"];
           	    vm.swiperId=arr.indexOf(vm.name);
           	    var index =(arr.length+1)/2;
           	    //arr.length%2==0?arr.length/2:(arr.length/2)+1;
           		var bannerPar = new Swiper('.header_user', {
					loop: true,
					slidesPerView: 3,
					speed:300,
					touchRatio: 0.2,
					slideToClickedSlide: true,
				});
				bannerPar.slideTo(index+vm.swiperId, 1000, false);
				

           },
           
           formatTime:function (time,type){
           		var dataTime="";
        		var goudan = new Date(time);
		        var year = goudan.getFullYear();
		        var month = goudan.getMonth() + 1;
		        var day = goudan.getDate();
		        var hour = goudan.getHours();
				var minute = goudan.getMinutes();
				var second = goudan.getSeconds();
				if(type == "YMD"){
					dataTime =  year + "-"+ month + "-" + day;
				}else if(type == "YMDHMS"){
					dataTime = year + "-"+month + "-" + day + " " +hour+ ":"+minute+":" +second;
				}else if(type == "HMS"){
					dataTime = hour+":" + minute+":" + second;
				}else if(type == "YMD"){
					dataTime = year + "-" + month + "-" + day;
				}
		        return dataTime;
        	},
        	billType:function(value){
        		var billType="";
        		switch(value)
        		{
        			case "1":
        			billType="生活用品";
        			break;
        		}
        		return billType;
        	},
        	formatName:function(value){
        		var name="";
        		switch(value)
        		{
        			case "xialei":
        			name="夏磊";
        			break;
        			case "pengwen":
        			name="彭文";
        			break;
        			case "panhongfei":
        			name="潘鸿飞";
        			break;
        			case "xiongcong":
        			name="熊聪";
        			break;
        			case "caowenjian":
        			name="操文健";
        			break;
        		}
        		return name;
        	},
        	description:function(value){
        		var description=value;
        		if(value==""||value==undefined||value==null){
        			description="暂无";
        		}
        		return description;
        	},
        	divideUser:function(value){
        		var divideUser="";
        		if(value==""||value==undefined||value==null){
        			divideUser="全部";
        		}
        		return divideUser;
        	},
        	
        },
        
        filters:{
        	formatTime:function(value,type){
        		return vm.formatTime(value,type);
        	},
        	formatName:function(value){
        		return vm.formatName(value);
        	},
        	billType:function(value){
        		return vm.billType(value);
        	},
        },
    });
    
	$(function(){
		vm.getLogList();
		vm.swiper();
		$(".user_footer>ul>li").eq(0).find("a").addClass("active");
		$(".user_footer>ul>li").on("click",function(){
			var index=$(this).index();
			if(index==1){
				window.location.href="total.html";
			}
		})
//		var bannerPar = new Swiper('.header_user', {
//			loop: true,
//			slidesPerView: 3,
//			speed:300,
//			touchRatio: 0.2,
//			slideToClickedSlide: true
//		});
//		var galleryTop = new Swiper('.gallery-top', {
//	        nextButton: '.swiper-button-next',
//	        prevButton: '.swiper-button-prev',
//	        spaceBetween: 10,
//	    });
//	    var galleryThumbs = new Swiper('.gallery-thumbs', {
//	        spaceBetween: 10,
//	        centeredSlides: true,
//	        slidesPerView: 'auto',
//	        touchRatio: 0.2,
//	        slideToClickedSlide: true
//	    });
//	    galleryTop.params.control = galleryThumbs;
//	    galleryThumbs.params.control = galleryTop;
	});
</script>
</body>
</html>
